<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telphone=yes, email=yes" />
    <meta name="description" content="王鹏的HTML版个人简历" />
    <title>wp's resume</title>
  </head>
  <!-- 邮件不支持JavaScript以及一些特殊标签，css样式也不能使用外联样式也不能写在head标签的style中，只能使用内联样式写在每一个标签中 -->
  <!-- 不能使用浮动的定位方式，经测试position：absolute;float:left;fixed等都不行，目前主要采用相对定位和flex布局-->
  <!-- 为了保证兼容性，设置邮件的最大宽度为800px -->
  <body style="margin: 0; padding: 0; /* max-width: 800px; */">
    <!-- 头部 姓名与联系方式 部分 -->
    <div
      style="
        min-height: 120px;
        /* 设置最小高度适配小屏设备 */
        display: flex;
        justify-content: space-between;
        background-color: #317eac;
      "
    >
      <ul style="margin: 19px 10px 20px 50px; padding: 0;">
        <!-- qq邮箱li无法继承ul的list-style-type属性，只能分别设置 -->
        <li style="list-style-type: none;">
          <span
            style="
              font-size: 36px;
              font-weight: 800;
              line-height: 60px;
              color: #fff;
              font-family: 'Telex', sans-serif;
            "
          >
            王鹏
          </span>
        </li>
        <li style="list-style-type: none;">
          <span
            style="
              color: #fff;
              font-family: 'Telex', sans-serif;
              font-size: 16px;
            "
          >
            23 / 男 / 前端开发工程师
          </span>
        </li>
      </ul>
      <div style="display: flex; flex-flow: row-reverse wrap-reverse;">
        <ul
          style="
            margin: 18px 50px 18px 0;
            padding: 0;
            font-size: 16px;
            line-height: 1.5;
            color: #fff;
            font-family: 'Telex', sans-serif;
            list-style-type: none;
          "
        >
          <li style="list-style-type: none;">
            <span>
              电话:
            </span>
            <a
              href="tel:13659845944"
              style="color: #fff; font-family: 'Telex', sans-serif;"
            >
              136 5984 5944
            </a>
          </li>
          <li style="list-style-type: none;">
            <span>
              QQ:
            </span>
            <a
              href="http://wpa.qq.com/msgrd?v=3&uin=731046400&site=qq&menu=yes"
              style="color: #fff; font-family: 'Telex', sans-serif;"
            >
              731046400
            </a>
          </li>
          <li style="list-style-type: none;">
            <span>
              邮箱:
            </span>
            <a
              href="mailto:wellpeng97@qq.com"
              style="color: #fff; font-family: 'Telex', sans-serif;"
            >
              wellpeng97@qq.com
            </a>
          </li>
          <li style="list-style-type: none;">
            <span>
              Github:
            </span>
            <a
              href="https://github.com/1pone"
              style="color: #fff; font-family: 'Telex', sans-serif;"
            >
              github.com/1pone
            </a>
          </li>
        </ul>
        <!-- 经测试使用img标签在移动端可能会有图片高度无法控制端情况，使用div background-image的方式在qq邮箱客户端无法显示，最后方法选择图床 -->
        <div
          style="
            width: 74px;
            height: 100px;
            background-image: url(https://wx2.sbimg.cn/2020/08/13/3Xohe.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            margin: 15px 40px;
          "
        ></div>
      </div>
    </div>
    <!-- 主体 详细信息部分 -->
    <div style="padding: 25px 50px;">
      <h2
        style="
          color: #317eac;
          font-family: 'Telex', sans-serif;
          margin-top: 0;
          display: inline-block;
        "
      >
        教育经历
      </h2>
      <hr
        style="
          border: 4px dashed #ccc;
          display: inline-block;
          margin-left: 10px;
          vertical-align: middle;
        "
        width="60%"
      />
      <ul style="margin-top: 0;">
        <li
          style="
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
          "
        >
          <span style="display: list-item;"
            >硕士&nbsp;&nbsp;/&nbsp;&nbsp;华中科技大学&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;工业工程&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;保研&nbsp;&nbsp;/&nbsp;&nbsp;研究方向：企业信息化</span
          >
          <span
            style="
              font-family: menlo, pingfang;
              font-style: italic;
              text-align: right;
              line-height: 26px;
            "
          >
            2019.09 - 至今
          </span>
        </li>
        <li
          style="
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
          "
        >
          <span style="display: list-item;"
            >本科&nbsp;&nbsp;/&nbsp;&nbsp;武汉科技大学&nbsp;&nbsp;/&nbsp;&nbsp;机械电子工程</span
          >
          <span
            style="
              font-family: menlo, pingfang;
              font-style: italic;
              text-align: right;
              line-height: 26px;
            "
          >
            2015.09 - 2019.06
          </span>
        </li>
      </ul>
      <h2
        style="
          color: #317eac;
          font-family: 'Telex', sans-serif;
          margin-top: 0;
          display: inline-block;
        "
      >
        项目经验
      </h2>
      <hr
        style="
          border: 4px dashed #ccc;
          display: inline-block;
          margin-left: 10px;
          vertical-align: middle;
        "
        width="60%"
      />
      <div
        style="
          display: flex;
          flex-flow: row wrap;
          justify-content: space-between;
        "
      >
        <h3
          style="
            color: #317eac;
            font-family: 'Telex', sans-serif;
            margin-top: 0;
          "
        >
          星光印刷有限公司包装印刷车间星光 MES
          <code
            style="
              display: inline-block;
              position: relative;
              bottom: 2px;
              margin-left: 4px;
              padding: 2px 4px;
              color: #666;
              background-color: #f7f7f9;
              border: 1px solid #e1e1e8;
              border-radius: 3px;
              font-size: 12px;
            "
          >
            团队项目
          </code>
          <code
            style="
              display: inline-block;
              position: relative;
              bottom: 2px;
              margin-left: 4px;
              padding: 2px 4px;
              color: #666;
              background-color: #f7f7f9;
              border: 1px solid #e1e1e8;
              border-radius: 3px;
              font-size: 12px;
            "
          >
            <a href="http://120.79.212.85:8082" style="color: #666;">在线展示</a>
          </code>
        </h3>
        <span
          style="
            font-family: menlo, pingfang;
            font-style: italic;
            text-align: right;
            line-height: 27px;
          "
        >
          2019.11 - 至今
        </span>
      </div>
      <ul style="margin-top: 0;">
        <li>
          <span>
            相关技术：
          </span>
          <code
            style="
              display: inline-block;
              position: relative;
              bottom: 1px;
              margin: 0 3px;
              padding: 2px 4px;
              color: #40b983;
              background-color: #f7f7f9;
              border: 1px solid #e1e1e8;
              border-radius: 3px;
              font-size: 12px;
            "
          >
            Vue
          </code>
          <code
            style="
              display: inline-block;
              position: relative;
              bottom: 1px;
              margin: 0 3px;
              padding: 2px 4px;
              color: #419eff;
              background-color: #f7f7f9;
              border: 1px solid #e1e1e8;
              border-radius: 3px;
              font-size: 12px;
            "
          >
            Element-ui
          </code>
          <code
            style="
              display: inline-block;
              position: relative;
              bottom: 1px;
              margin: 0 3px;
              padding: 2px 4px;
              color: #aa304d;
              background-color: #f7f7f9;
              border: 1px solid #e1e1e8;
              border-radius: 3px;
              font-size: 12px;
            "
          >
            Echarts
          </code>
          <code
            style="
              display: inline-block;
              position: relative;
              bottom: 1px;
              margin: 0 3px;
              padding: 2px 4px;
              color: #cd642c;
              background-color: #f7f7f9;
              border: 1px solid #e1e1e8;
              border-radius: 3px;
              font-size: 12px;
            "
          >
            Heatmap.js
          </code>
        </li>
        <li>项目描述：一个包装印刷车间的制造执行系统</li>
        <li>
          主要工作：
          <ul>
            <li>
              完成系统车间数据可视化模块的前端开发，前后端分离提高前后端开发效率
            </li>
            <li>
              定义了通用的车间设备信息数据结构，适用于车间可视化各个功能模块
            </li>
            <li>使用Echarts完成逻辑车间的制造工艺、物料流动等可视化展示</li>
            <li>使用Heatmap.js以热力图形式完成车间设备利用率的可视化展示</li>
            <li>封装可复用组件及功能函数类，方便项目中重复使用</li>
          </ul>
        </li>
      </ul>
      <hr style="border: 1px dashed #aaaaaa44;" width="96%" />
      <div
        style="
          display: flex;
          flex-flow: row wrap;
          justify-content: space-between;
        "
      >
        <h3
          style="
            color: #317eac;
            font-family: 'Telex', sans-serif;
            margin-top: 0;
          "
        >
          基于物联网的智能精准烘烤系统
          <code
            style="
              display: inline-block;
              position: relative;
              bottom: 2px;
              margin-left: 4px;
              padding: 2px 4px;
              color: #666;
              background-color: #f7f7f9;
              border: 1px solid #e1e1e8;
              border-radius: 3px;
              font-size: 12px;
            "
          >
            团队项目
          </code>
          <code
            style="
              display: inline-block;
              position: relative;
              bottom: 2px;
              margin-left: 4px;
              padding: 2px 4px;
              color: #666;
              background-color: #f7f7f9;
              border: 1px solid #e1e1e8;
              border-radius: 3px;
              font-size: 12px;
            "
          >
            <a href="http://120.79.212.85:8081" style="color: #666;">在线展示</a>
          </code>
        </h3>
        <span
          style="
            font-family: menlo, pingfang;
            font-style: italic;
            text-align: right;
            line-height: 27px;
          "
        >
          2020.07 - 2020.08
        </span>
      </div>
      <ul style="margin-top: 0;">
        <li>
          <span>
            相关技术：
          </span>
          <code
            style="
              display: inline-block;
              position: relative;
              bottom: 1px;
              margin: 0 3px;
              padding: 2px 4px;
              color: #40b983;
              background-color: #f7f7f9;
              border: 1px solid #e1e1e8;
              border-radius: 3px;
              font-size: 12px;
            "
          >
            Vue
          </code>
          <code
            style="
              display: inline-block;
              position: relative;
              bottom: 1px;
              margin: 0 3px;
              padding: 2px 4px;
              color: #419eff;
              background-color: #f7f7f9;
              border: 1px solid #e1e1e8;
              border-radius: 3px;
              font-size: 12px;
            "
          >
            Element-ui
          </code>
          <code
            style="
              display: inline-block;
              position: relative;
              bottom: 1px;
              margin: 0 3px;
              padding: 2px 4px;
              color: #aa304d;
              background-color: #f7f7f9;
              border: 1px solid #e1e1e8;
              border-radius: 3px;
              font-size: 12px;
            "
          >
            Echarts
          </code>
        </li>
        <li>项目描述：一个基于物联网的烤烟监控管理系统</li>
        <li>
          主要工作：
          <ul>
            <li>
             使用Element-UI进行页面搭建布局
            </li>
            <li>使用Echarts烘烤过程数据的图形可视化展示</li>
            <li>封装可复用组件方便项目中重复使用</li>
          </ul>
        </li>
      </ul>
      <hr style="border: 1px dashed #aaaaaa44;" width="96%" />
      <div
        style="
          display: flex;
          flex-flow: row wrap;
          justify-content: space-between;
        "
      >
        <h3
          style="
            color: #317eac;
            font-family: 'Telex', sans-serif;
            margin-top: 0;
          "
        >
          电商后台管理系统
          <code
            style="
              display: inline-block;
              position: relative;
              bottom: 2px;
              margin-left: 4px;
              padding: 2px 4px;
              color: #666;
              background-color: #f7f7f9;
              border: 1px solid #e1e1e8;
              border-radius: 3px;
              font-size: 12px;
            "
          >
            个人项目
          </code>
          <code
            style="
              display: inline-block;
              position: relative;
              bottom: 2px;
              margin-left: 4px;
              padding: 2px 4px;
              color: #666;
              background-color: #f7f7f9;
              border: 1px solid #e1e1e8;
              border-radius: 3px;
              font-size: 12px;
            "
          >
            <a href="http://120.79.212.85:8080" style="color: #666;">在线展示</a>
          </code>
        </h3>
        <span
          style="
            font-family: menlo, pingfang;
            font-style: italic;
            text-align: right;
            line-height: 27px;
          "
        >
          2019.10 - 2019.12
        </span>
      </div>
      <ul style="margin-top: 0;">
        <li>
          <span>
            相关技术：
          </span>
          <code
            style="
              display: inline-block;
              position: relative;
              bottom: 1px;
              margin: 0 3px;
              padding: 2px 4px;
              color: #40b983;
              background-color: #f7f7f9;
              border: 1px solid #e1e1e8;
              border-radius: 3px;
              font-size: 12px;
            "
          >
            Vue
          </code>
          <code
            style="
              display: inline-block;
              position: relative;
              bottom: 1px;
              margin: 0 3px;
              padding: 2px 4px;
              color: #419eff;
              background-color: #f7f7f9;
              border: 1px solid #e1e1e8;
              border-radius: 3px;
              font-size: 12px;
            "
          >
            Element-ui
          </code>
          <code
            style="
              display: inline-block;
              position: relative;
              bottom: 1px;
              margin: 0 3px;
              padding: 2px 4px;
              color: #2071b3;
              background-color: #f7f7f9;
              border: 1px solid #e1e1e8;
              border-radius: 3px;
              font-size: 12px;
            "
          >
            Webpack
          </code>
          <code
            style="
              display: inline-block;
              position: relative;
              bottom: 1px;
              margin: 0 3px;
              padding: 2px 4px;
              color: #fb4f27;
              background-color: #f7f7f9;
              border: 1px solid #e1e1e8;
              border-radius: 3px;
              font-size: 12px;
            "
          >
            Git
          </code>
        </li>
        <li>
          项目描述：一个拥有用户权限管理，商品管理，订单管理等功能的电商后台管理系统
        </li>
        <li>
          主要工作：
          <ul>
            <li>
              使用Vue-cli对项目进行初始化及Webpack、Babel、Eslint相关初始化配置
            </li>
            <li>使用Vue-Router配置页面路由</li>
            <li>使用Element-UI进行页面搭建布局</li>
            <li>使用路由守卫在路由配置生效前对用户身份进行token验证</li>
            <li>完成系统各功能模块的开发</li>
            <li>使用Git对项目进行版本控制</li>
          </ul>
        </li>
      </ul>
      <h2
        style="
          color: #317eac;
          font-family: 'Telex', sans-serif;
          margin-top: 0;
          display: inline-block;
        "
      >
        技能描述
      </h2>
      <hr
        style="
          border: 4px dashed #ccc;
          display: inline-block;
          margin-left: 10px;
          vertical-align: middle;
        "
        width="60%"
      />
      <h3
        style="color: #317eac; font-family: 'Telex', sans-serif; margin-top: 0;"
      >
        Web前端
      </h3>
      <ul style="margin-top: 0;">
        <li>
          熟练使用 HTML / CSS 进行页面搭建和布局，熟悉 HTML5 / CSS3 新特性
        </li>
        <li>
          熟练使用 JavaScript 语言，熟悉原生 DOM / BOM / Ajax 等
        </li>
        <li>
          熟练使用 Vue / Webpack / Element-UI 等技术链进行前端开发
        </li>
        <li>
          熟练使用 Echarts 进行数据可视化展示
        </li>
        <li>
          有 大屏可视化 / 响应式设计 的相关经验
        </li>
      </ul>
      <h3
        style="color: #317eac; font-family: 'Telex', sans-serif; margin-top: 0;"
      >
        Web后端
      </h3>
      <ul style="margin-top: 0;">
        <li>
          使用过 Node.js ，能够通过 Express
          框架搭建后端程序并进行数据处理和数据库交互
        </li>
        <li>
          使用过 Java 进行后端业务设计，能通过 Mybaties 对数据库进行操作
        </li>
        <li>
          有使用 Mysql / MongoDB 等数据库的经验
        </li>
      </ul>
      <h3
        style="color: #317eac; font-family: 'Telex', sans-serif; margin-top: 0;"
      >
        其他技能
      </h3>
      <ul style="margin-top: 0;">
        <li>
          英语通过 CET6，能够流畅阅读英文文档
        </li>
        <li>
          能够使用 Photoshop / Illustrator 完成简单的图像处理和平面设计
        </li>
      </ul>
      <h2
        style="
          color: #317eac;
          font-family: 'Telex', sans-serif;
          margin-top: 0;
          display: inline-block;
        "
      >
        获奖描述
      </h2>
      <hr
        style="
          border: 4px dashed #ccc;
          display: inline-block;
          margin-left: 10px;
          vertical-align: middle;
        "
        width="60%"
      />
      <ul style="margin-top: 0;">
        <li>
          2019 - 2020 年度硕士研究生奖学金一等奖
        </li>
        <li>
          2019 年武汉科技大学优秀毕业生
        </li>
        <li>
          2018 年湖北省大学生机械创新设计大赛一等奖
        </li>
        <li>
          2017-2018 年度武汉科技大学优秀学生奖学金一等奖
        </li>
      </ul>
      <h2
        style="
          color: #317eac;
          font-family: 'Telex', sans-serif;
          margin-top: 0;
          display: inline-block;
        "
      >
        自我评价
      </h2>
      <hr
        style="
          border: 4px dashed #ccc;
          display: inline-block;
          margin-left: 10px;
          vertical-align: middle;
        "
        width="60%"
      />
      <ul style="margin-top: 0;">
        <li>待人真诚，对待工作认真负责</li>
        <li>能很好落实上级交代的任务，与团队合作协同工作</li>
        <li>有较好的编程习惯</li>
        <li>善于探索前沿技术，有较好的学习能力和动手能力</li>
        <li>
          热爱生活，有对艺术的追求向往，始终相信好的产品应当能让用户有如同艺术品般的美好享受
        </li>
      </ul>
      <div>
        <p
          style="
            text-align: center;
            font-family: 'Telex', sans-serif;
            font-size: 12px;
            color: #888;
            line-height: 24px;
          "
        >
          「&nbsp;
          感谢您在百忙之中在我的简历上停留数秒，相信这数秒的时间对于我们而言都是一次难得的机遇。」<br>
          <a href="https://1pone.github.io/resume/resume.html" style="color: #888;">查看在线简历 →</a>
        </p>
      </div>
    </div>
  </body>
</html>
